<template>
  <div class="main">
    <div class="left">
      <navigation @sonSend='sonSend'></navigation>
      <div class="rec-city">
        <p>推荐城市</p>
        <div class="sep"></div>
        <img
          src="@/assets/pic_sea.jpeg"
          alt=""
        >
      </div>
    </div>
    <div class="right">
      <!-- 搜索框 -->
      <input
        placeholder="请输入想去的地方，比如：“广州”"
        v-model="searchValue"
        @keyup.13="searchCity"
      >
      <div
        class="icon_search el-icon-search"
        @click="searchCity"
      ></div>
      <!-- 搜索历史 -->
      <div class="Search-history">
        <span>推荐:</span>
        <span
          v-for="(item,index) in city"
          :key="index"
          @click="historySearch(item)"
          class="historySearch"
        >{{item}}</span>
      </div>
      <!-- 推荐攻略 -->
      <div class="strategy">
        <div class="head">
          <span>推荐攻略</span>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="$router.push({path:'/post/create'})"
          >写游记</el-button>
        </div>
        <div class="wire"></div>
        <postItem
          v-for="(item,index) in newList"
          :key="index"
          :data='item'
        ></postItem>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="postList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { posts } from "@/api/post";
import postItem from "@/components/post/postItem";
import navigation from "@/components/post/navigation";
export default {
  data() {
    return {
      city: ["广州", "上海", "北京", "青岛", "深圳", "葫芦岛"],
      postData: {},
      searchValue: "",
      postList: [],
      pageIndex: 1,
      pageSize: 3,
      loading: null,
    };
  },
  computed: {
    // 根据分页获得需要渲染的文章列表数据
    newList() {
      if (!this.postList) {
        return [];
      }
      const end = this.pageIndex * this.pageSize;
      const begin = end - this.pageSize;
      return this.postList.slice(begin, end);
    },
  },
  methods: {
    // 加载时的遮罩
    maskLayer() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },

    sonSend(c) {
      this.searchValue = c;
      this.init(c);
    },
    historySearch(v) {
      this.searchValue = v;
      this.init(v);
    },
    async searchCity() {
      this.init(this.searchValue);
    },
    show() {
      this.isShow = ture;
    },
    hide() {
      this.isShow = false;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    async init(value) {
      let res = await posts(value);
      if (res) {
        this.postData = res;
        this.postList = res.data.data;
      }
      this.pageIndex = 1;
      this.loading.close();
    },
  },
  components: {
    navigation,
    postItem,
  },
  async created() {
    this.maskLayer();
    if (this.$route.query.cityName) {
      this.searchValue = this.$route.query.cityName;
      this.init(this.searchValue);
      return;
    }
    this.init();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-pagination {
  margin: 20px;
}
.main {
  width: 1000px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;

  .left {
    width: 260px;

    .rec-city {
      p {
        margin: 20px 0 10px;
      }
      .sep {
        border-top: 1px solid #dddddd;
        margin-bottom: 8px;
      }
      img {
        width: 100%;
      }
    }
  }

  .right {
    position: relative;
    width: 700px;

    input {
      width: 655px;
      height: 40px;
      padding: 0 20px;
      border: 3px solid #ffa500;
      border-radius: 0;
      outline: none;
    }
    .icon_search {
      color: #ffa500;
      position: absolute;
      top: 11px;
      right: 10px;
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
    }

    .Search-history {
      margin-top: 12px;
      font-size: 10px;
      color: #666666;
      span {
        margin-right: 8px;
      }
      .historySearch {
        cursor: pointer;
        &:hover {
          color: #ffa500;
        }
      }
    }

    .strategy {
      .head {
        padding: 10px 0;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          color: #ffa500;
          height: 100%;
          line-height: 42px;
          font-size: 18px;
          border-bottom: 3px solid #ffa500;
        }
      }
      .wire {
        margin-top: -8px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>